/* eslint-disable jsx-a11y/alt-text */
import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Card, Empty, Tooltip } from 'antd';
import { formatMessage } from 'umi';
import { get as _get } from 'object-path';
// import cn from 'classnames';
// import cookie from 'js-cookie';

// import moment from 'moment';
import { Link }  from 'umi';
// import _ from 'lodash';
import img2 from '@/assets/data_icon_award_default.png';
import img3 from '@/assets/data_icon_celebrate_default.png';
import LeaveCharts from './LeaveCharts';
import BarCharts from './BarCharts';
import AttendanceMonth from './AttendanceMonth';
import styles from '../List.less';
// import img1 from '@/assets/data_icon_nodata_default.png';

class DetailPage extends PureComponent {
    state = {
        // thisMonth: moment().format('YYYY-MM')
    };

    // 对数据里的-1空数据进行改变值为0
    getData = data => {
        const newData = data;
        // eslint-disable-next-line no-restricted-syntax
        for (const i in newData) {
            if (!newData[i]) {
                newData[i] = 0;
            }
        }
        // eslint-disable-next-line no-restricted-syntax
        for (const e in newData.leaveMap) {
            if (!newData.leaveMap[e]) {
                newData.leaveMap[e] = 0;
            }
        }
        return newData;
    };

    render() {
        const { style, data, empty, selectionTime, idUserEnter, user, thisMonth, random } = this.props;
        // const localUser = JSON.parse(localStorage.getItem('user'));
        // 员工公司id的获取方法两种，一种为通过props获得比如员工管理入口，一种为考勤主页，取缓存数据
        let companyid;
        let DefaultEmployee; // 员工主岗id
        if (user) {
            const { companyId, employeeCode } = user;
            companyid = companyId;
            DefaultEmployee = employeeCode;
        } else {
            companyid = JSON.parse(localStorage.getItem('user')).companyId;
            DefaultEmployee = '';
        }
        const datas = this.getData(data);
        const templat1 = datas.allDay === 0; // 出勤（天）根据实际出勤天数判断是否显示
        const templat2 = datas.workOvertime + datas.workOvertimeHolidays + datas.overtimeRestTime === 0; // 加班（小时）根据工作日/休息日/节假日的和是否大与0判断是否显示
        const templat3 = datas.totalLeave === 0; // 请假/调休数据大于0
        const templat4 =
            datas.late1Num +
                datas.late2Num +
                datas.earlyLeave1Num +
                datas.earlyLeave2Num +
                datas.missCard +
                datas.absenceDuty ===
            0; // 异常部分没数据
        const renderText = id =>
            formatMessage({
                id
            });
        return (
            <Fragment>
                {/* 这里由于是旧页面，后面迭代后逻辑不同，比如companyid的获取其实是错的，等后续再看怎么优化页面 */}
                <AttendanceMonth
                    thisMonth={thisMonth}
                    employeeCode={DefaultEmployee}
                    companyid={companyid}
                    random={random}
                />
                <Row gutter={12} style={{ ...style }}>
                    <Col lg={{ span: 24 }} xl={{ span: 10 }}>
                        <Card
                            className={styles.card}
                            title={formatMessage({
                                id: 'stat.title.cq'
                            })}
                            bordered={false}
                            extra={
                                idUserEnter ? (
                                    ''
                                ) : (
                                    <Link
                                        to={{
                                            pathname: '/personal/portal/attendance/mine/list/attendanceDetail',
                                            query: {
                                                date: _get(selectionTime, '')
                                            }
                                        }}
                                    >
                                        {formatMessage({
                                            id: 'menu.personal.mine.attendanceDetail'
                                        })}
                                    </Link>
                                )
                            }
                        >
                            {empty === 1 || templat1 ? (
                                <Empty
                                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                                    description={formatMessage({
                                        id: 'stat.name.zwsj'
                                    })}
                                />
                            ) : (
                                <div style={{ margin: '27px 0' }}>
                                    <p className={styles.fontbox}>
                                        <span>
                                            {formatMessage({
                                                id: 'stat.name.sjcq'
                                            })}
                                            ：
                                        </span>
                                        <b className={styles.bigFontSize}>{_get(datas, 'attendanceDay', '')}</b>
                                        <span>
                                            {formatMessage({
                                                id: 'stat.day'
                                            })}
                                        </span>
                                    </p>

                                    <div className={styles.fontbox}>
                                        <div className={styles.col}>
                                            <span>
                                                {formatMessage({
                                                    id: 'stat.name.ycq'
                                                })}
                                                ：
                                            </span>
                                            <b>
                                                {_get(datas, 'allDay', '')}
                                                {formatMessage({
                                                    id: 'stat.day'
                                                })}
                                            </b>
                                        </div>
                                        <div className={styles.col}>
                                            <span>
                                                {formatMessage({
                                                    id: 'stat.name.cql'
                                                })}
                                                ：
                                            </span>
                                            <b>{_get(datas, 'attendanceRate', '')}%</b>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </Card>
                        <Card
                            className={styles.card}
                            bordered={false}
                            title={formatMessage({
                                id: 'stat.title.jb'
                            })}
                            extra={
                                idUserEnter ? (
                                    ''
                                ) : (
                                    <Link
                                        to={{
                                            pathname: '/personal/portal/attendance/mine/overList',
                                            query: {
                                                date: _get(selectionTime, '')
                                            }
                                        }}
                                    >
                                        {formatMessage({
                                            id: 'menu.personal.mine.overList'
                                        })}
                                    </Link>
                                )
                            }
                        >
                            {empty === 1 || templat2 ? (
                                <div
                                    style={{
                                        textAlign: 'center',
                                        color: 'rgba(0, 0, 0, .25)',
                                        padding: '80px 0',
                                        height: '280px'
                                    }}
                                >
                                    <img src={img2} style={{ marginBottom: 10 }} />
                                    <p>
                                        {formatMessage({
                                            id: 'stat.name.wjbsj'
                                        })}
                                    </p>
                                </div>
                            ) : (
                                <BarCharts data={data} />
                            )}
                        </Card>
                    </Col>
                    <Col lg={{ span: 24 }} xl={{ span: 14 }}>
                        <Card
                            className={styles.card}
                            bordered={false}
                            title={formatMessage({
                                id: 'stat.title.qj/tx'
                            })}
                            extra={
                                idUserEnter ? (
                                    ''
                                ) : (
                                    <div className={styles.links}>
                                        <Link
                                            to={{
                                                pathname: '/personal/portal/attendance/mine/tripList'
                                            }}
                                        >
                                            {formatMessage({
                                                id: 'stat.name.ccjl'
                                            })}
                                        </Link>
                                        <Link
                                            to={{
                                                pathname: '/personal/portal/attendance/mine/outList'
                                            }}
                                        >
                                            {formatMessage({
                                                id: 'stat.name.wcjl'
                                            })}
                                        </Link>
                                        <Link
                                            to={{
                                                pathname: '/personal/portal/attendance/mine/holiday',
                                                query: {
                                                    date: _get(selectionTime, '')
                                                }
                                            }}
                                        >
                                            {formatMessage({
                                                id: 'stat.name.qjjl'
                                            })}
                                        </Link>
                                    </div>
                                )
                            }
                        >
                            {empty === 1 || templat3 ? (
                                <div
                                    style={{
                                        textAlign: 'center',
                                        color: 'rgba(0, 0, 0, .25)',
                                        height: '250px',
                                        padding: '70px 0'
                                    }}
                                >
                                    <img src={img3} style={{ marginBottom: 10 }} />
                                    <p>
                                        {formatMessage({
                                            id: 'stat.name.nzb'
                                        })}
                                    </p>
                                </div>
                            ) : (
                                <LeaveCharts data={data} />
                            )}
                        </Card>
                        <Card
                            className={styles.card}
                            bordered={false}
                            title={formatMessage({
                                id: 'stat.title.yc'
                            })}
                            extra={
                                idUserEnter ? (
                                    ''
                                ) : (
                                    <Link
                                        to={{
                                            pathname: '/personal/portal/attendance/mine/abnormal',
                                            query: {
                                                date: _get(selectionTime, '')
                                            }
                                        }}
                                    >
                                        {formatMessage({
                                            id: 'menu.personal.mine.abnormal'
                                        })}
                                    </Link>
                                )
                            }
                        >
                            {empty === 1 || templat4 ? (
                                <div
                                    style={{
                                        textAlign: 'center',
                                        color: 'rgba(0, 0, 0, .25)',
                                        height: '143px',
                                        padding: '25px 0'
                                    }}
                                >
                                    <img src={img3} style={{ marginBottom: 10 }} />
                                    <p>
                                        {formatMessage({
                                            id: 'stat.name.bywkqyc'
                                        })}
                                    </p>
                                </div>
                            ) : (
                                <ul className={styles.abnormal}>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={
                                                companyid === 101
                                                    ? renderText('rules.cn.chidao1')
                                                    : renderText('rules.sg.chidao1')
                                            }
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.chidao1'
                                                })}
                                            </div>
                                        </Tooltip>
                                        <p>
                                            {_get(datas, 'late1Num', '')}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </p>
                                        <span>{_get(datas, 'late1Time', '')}min</span>
                                    </li>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={
                                                companyid === 101
                                                    ? renderText('rules.cn.chidao2')
                                                    : renderText('rules.sg.chidao2')
                                            }
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.chidao2'
                                                })}
                                            </div>
                                        </Tooltip>
                                        <p>
                                            {_get(datas, 'late2Num', '')}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </p>
                                        <span>{_get(datas, 'late2Time', '')}min</span>
                                    </li>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={
                                                companyid === 101
                                                    ? renderText('rules.cn.zaotui1')
                                                    : renderText('rules.sg.zaotui1')
                                            }
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.zaotui1'
                                                })}
                                            </div>
                                        </Tooltip>
                                        <p>
                                            {_get(datas, 'earlyLeave1Num', '')}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </p>
                                        <span>
                                            {_get(datas, 'earlyLeave1Time', '')}
                                            min
                                        </span>
                                    </li>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={
                                                companyid === 101
                                                    ? renderText('rules.cn.zaotui2')
                                                    : renderText('rules.sg.zaotui2')
                                            }
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.zaotui2'
                                                })}
                                            </div>
                                        </Tooltip>

                                        <p>
                                            {_get(datas, 'earlyLeave2Num', '')}{' '}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </p>
                                        <span>
                                            {_get(datas, 'earlyLeave2Time', '')}
                                            min
                                        </span>
                                    </li>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={formatMessage({
                                                id: companyid === 101 ? 'rules.cn.queka' : 'rules.sg.queka'
                                            })}
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.queka'
                                                })}
                                            </div>
                                        </Tooltip>

                                        <span>
                                            {_get(datas, 'missCard', '')}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </span>
                                    </li>
                                    <li>
                                        <Tooltip
                                            placement="top"
                                            title={formatMessage({
                                                id: companyid === 101 ? 'rules.cn.queqin' : 'rules.sg.queqin'
                                            })}
                                        >
                                            <div className={styles.name}>
                                                {formatMessage({
                                                    id: 'stat.queqin'
                                                })}
                                            </div>
                                        </Tooltip>

                                        <span>
                                            {_get(datas, 'absenceDuty', '')}
                                            {formatMessage({
                                                id: 'stat.ci'
                                            })}
                                        </span>
                                    </li>
                                </ul>
                            )}
                        </Card>
                    </Col>
                </Row>
            </Fragment>
        );
    }
}
DetailPage.propTypes = {
    /**
     * 数据结构
     */
    // eslint-disable-next-line react/require-default-props
    data: PropTypes.object,
    /**
     * 自定义样式
     */
    // eslint-disable-next-line react/require-default-props
    style: PropTypes.object,
    /**
     * 如果是空数据传入1 ，不空为0
     */
    // eslint-disable-next-line react/require-default-props
    empty: PropTypes.number,
    /**
     * 当前考勤月日期
     */
    // eslint-disable-next-line react/require-default-props
    selectionTime: PropTypes.string,
    /**
     * 如果从员工管理进来这个页面的，暂时隐藏掉出勤记录和请假记录
     */
    // eslint-disable-next-line react/require-default-props
    idUserEnter: PropTypes.bool,
    /**
     * 用户信息
     */
    // eslint-disable-next-line react/require-default-props
    user: PropTypes.object,
    /**
     * 选择的日期
     */
    // eslint-disable-next-line react/require-default-props
    thisMonth: PropTypes.string
};
export default DetailPage;
